<template>
  <div class="favorate">
    <van-nav-bar title="我的出租" >
      <template #left>
        <van-icon name="arrow-left" class="iconFont" @click="$router.back()" />
      </template>
    </van-nav-bar>
      <van-card
      v-for="item in myList"
      :key="item.houseCode"
        :desc="item.desc"
        :title="item.title"
        currency=''
        :thumb="'http://liufusong.top:8080'+item.houseImg"
        @click="houseDetile(item.houseCode)"
      >
        <template #tags>
          <van-tag color="#e1f5f8" text-color="#39becd" size="medium" v-for="(item,index) in item.tags" :key="index" >{{item}}</van-tag>
        </template>
        <template #price>
          <div class="houseItem">
            <span>{{item.price}}</span>元/月
          </div>
        </template>
      </van-card>
  </div>
</template>

<script>
import { getMyRenout, getHosueCode } from '@/api/user.js'
import { Toast } from 'vant'

export default {
  name: 'myrenout',
  data () {
    return {
      myList: []
    }
  },

  created () {
    this.getMy()
  },

  methods: {
    async getMy () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      try {
        const res = await getMyRenout()
        this.myList = res
        console.log(this.myList)
        Toast.success('加载成功')
      } catch (error) {
        Toast.fail('加载失败')
      }
    },
    // 点击跳转到详情
    async  houseDetile (id) {
      await getHosueCode(id)
      this.$router.push('/detail/' + id)
    }

  }
}
</script>

<style scoped lang='less'>
.favorate{
    .van-nav-bar{
    background-color: #21b97a;
    /deep/.van-nav-bar__title{
      font-size: 18px;
      color: #fff;
    }
      .iconFont{
      color: #fff;
      font-size: 18px;
    }
  }
  .houseItem{
    color: #fa5741;
    span{
      font-size: 16px;
      font-weight: bolder;
    }
    font-size: 12px;
  }
  .van-tag--medium{
    margin-top: 5px;
  }
  .van-card__title{
    font-size: 15px;
    color: #394043;
    font-weight: 700;
  }
  .van-card{
    background-color: transparent;
  }
  .van-card:not(:first-child){
    border-bottom: 1px solid #e5e5e5;
  }
}
</style>
